<template>
    <button class="check-btn" :class="{active: isActive}" @click="changeActive">
      <img src="~assets/img/cart/tick.svg" alt="">
    </button>
</template>

<script>
export default {
  name: 'CheckBtn',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    changeActive() {
      this.$emit('changeActive');
    }
  }
}
</script>

<style scoped>
  .check-btn{
    background-color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border:none;
    outline: none;
    
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    border: 1px solid #ccc;
    
  }
  .active{
    background-color: var(--color-tint);
  }
</style>